<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>卡密列表</title>
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
</head>

<body>
    <div class="layui-card">
        <div class="layui-card" style="margin-top: 15px;">
            <div class="layui-card-header">卡密列表</div>
            <div class="layui-card-body">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">卡密号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="fake" placeholder="请输入卡密号" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select name="type">
                                    <option value="">全部</option>
                                    <option value="1">VIP时长</option>
                                    <option value="2">经验值</option>
                                    <option value="3">金币</option>
                                    <option value="4">邀请码</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="0">未使用</option>
                                    <option value="1">已使用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="searchSubmit">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 数据表格 -->
                <table id="cardTable" lay-filter="cardTable"></table>

                <!-- 表格工具栏 -->
                <script type="text/html" id="tableToolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加卡密</button>
                        <button class="layui-btn layui-btn-sm" lay-event="export">导出选中</button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除选中</button>
                    </div>
                </script>

                <!-- 表格状态列模板 -->
                <script type="text/html" id="statusTpl">
                    {{#  if(d.status == 0){ }}
                    <span class="layui-badge layui-bg-green">未使用</span>
                    {{#  } else { }}
                    <span class="layui-badge layui-bg-gray">已使用</span>
                    {{#  } }}
                </script>

                <!-- 表格类型列模板 -->
                <script type="text/html" id="typeTpl">
                    {{#  if(d.type == 1){ }}
                    <span>VIP时长</span>
                    {{#  } else if(d.type == 2) { }}
                    <span>经验值</span>
                    {{#  } else if(d.type == 3) { }}
                    <span>金币</span>
                    {{#  } else if(d.type == 4) { }}
                    <span>邀请码</span>
                    {{#  } }}
                </script>
            </div>
        </div>
    </div>

    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(['form', 'table', 'layer', 'util'], function () {
            var form = layui.form,
                table = layui.table,
                layer = layui.layer,
                util = layui.util,
                $ = layui.$;

            // 表单验证规则
            form.verify({
                count: function (value) {
                    if (value > 100) {
                        return '一次最多生成100张卡密';
                    }
                }
            });

            // 监听卡密类型选择
            form.on('select(type)', function (data) {
                var unit = '';
                switch (data.value) {
                    case '1':
                        unit = '单位：天';
                        break;
                    case '2':
                        unit = '单位：点';
                        break;
                    case '3':
                        unit = '单位：个';
                        break;
                }
                $('#valueUnit').html(unit);
            });

            // 初始化表格
            table.render({
                elem: '#cardTable',
                url: '{:url("/admin/fake/list")}',
                parseData: function (res) {
                    return {
                        "code": 0, 
                        "msg": res.message, 
                        "count": res.data.total, 
                        "data": res.data.data
                    };
                },
                toolbar: '#tableToolbar',
                defaultToolbar: ['filter', 'exports', 'print'],
                cols: [[
                    { type: 'checkbox' },
                    { field: 'id', title: 'ID', width: 80, sort: true },
                    { field: 'fake', title: '卡密号', width: 180 },
                    { field: 'type', title: '类型', width: 100, templet: '#typeTpl' },
                    { field: 'value', title: '值', width: 100 },
                    { field: 'status', title: '状态', width: 100, templet: '#statusTpl' },
                    {
                        field: 'use_time', title: '使用时间', width: 160, templet: function (d) {
                            return d.use_time ? util.toDateString(d.use_time * 1000) : '';
                        }
                    },
                    { field: 'use_user_id', title: '使用用户', width: 100 },
                    {
                        field: 'create_time', title: '创建时间', width: 160, templet: function (d) {
                            return util.toDateString(d.create_time * 1000);
                        }
                    }
                ]],
                page: true,
                limit: 20,
                limits: [20, 50, 100]
            });

            // 监听工具栏事件
            table.on('toolbar(cardTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;

                switch (obj.event) {
                    case 'export':
                        if (data.length === 0) {
                            layer.msg('请选择要导出的数据');
                            return;
                        }

                        // 准备CSV数据
                        let csvContent = '卡密ID,卡密号,类型,值,状态,使用时间,使用用户,创建时间\n';

                        data.forEach(function (item) {
                            // 处理类型显示
                            let typeText = '';
                            switch (item.type) {
                                case 1: typeText = 'VIP时长'; break;
                                case 2: typeText = '经验值'; break;
                                case 3: typeText = '金币'; break;
                                case 4: typeText = '邀请码'; break;
                            }

                            // 处理状态显示
                            let statusText = item.status == 0 ? '未使用' : '已使用';

                            // 处理时间格式
                            let useTime = item.use_time ? util.toDateString(item.use_time * 1000) : '';
                            let createTime = util.toDateString(item.create_time * 1000);

                            // 组装行数据
                            let row = [
                                item.id,
                                item.fake,
                                typeText,
                                item.value,
                                statusText,
                                useTime,
                                item.use_user_id || '',
                                createTime
                            ].map(function (val) {
                                // 处理可能包含逗号的字段
                                return `"${val}"`;
                            }).join(',');

                            csvContent += row + '\n';
                        });

                        // 创建Blob对象
                        const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvContent], {
                            type: 'text/csv;charset=utf-8;'
                        });

                        // 创建下载链接
                        const link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = '卡密数据_' + util.toDateString(new Date(), 'yyyyMMdd_HHmmss') + '.csv';

                        // 触发下载
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);

                        layer.msg('导出成功', { icon: 1 });
                        break;
                    case 'add':
                        layer.open({
                            title: '添加卡密',
                            type: 2,
                            area: ['80%', '80%'],
                            content: '/admin/fake/add'
                        });
                        break
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择要删除的数据');
                            return;
                        }
                        var ids = data.map(item => item.id).join(',');
                        layer.confirm('确定删除选中的卡密吗?', function (index) {
                            $.get('/admin/fake/del', { id: ids }, (res) => {
                                if (res.code == 200) {
                                    table.reload('cardTable');
                                    layer.msg('删除成功');
                                } else {
                                    layer.msg('删除失败');
                                }
                            });
                        });
                        break;
                }
            });

            // 监听搜索提交
            form.on('submit(searchSubmit)', function (data) {
                table.reload('cardTable', {
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 监听卡密生成提交
            form.on('submit(cardSubmit)', function (data) {
                layer.load();
                $.ajax({
                    url: '{:url("card/generate")}',
                    type: 'POST',
                    data: data.field,
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code == 0) {
                            layer.msg('生成成功', { icon: 1 });
                            table.reload('cardTable');
                            // 重置表单
                            $('form[lay-filter="cardForm"]')[0].reset();
                            form.render();
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.closeAll('loading');
                        layer.msg('服务器错误', { icon: 2 });
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>